
<f:view xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pm="http://primefaces.org/mobile"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	template="/template/main_mobile.xhtml" contentType="text/html"
	renderKitId="PRIMEFACES_MOBILE">
	
	<h:outputStylesheet name="css/foundation.css" />
	<h:outputStylesheet name="css/custom_styles.css"></h:outputStylesheet>

	<pm:page title="Drinks">

		<p:growl id="messages" globalOnly="true" />

		<!-- Main View -->
		<pm:view id="main">

			<pm:header title="Selecionar Drink" swatch="e">
				<f:facet name="left">
					<p:button style="width:10; height:30; border:1px solid #000;"
						value="#{messages['button.back']}" icon="back"
						href="#{drinkEditMB.previousView}" />
				</f:facet>
				<f:facet name="right">
					<p:button value="#{messages['main.app.title']}" icon="home"
						href="./navigator.jsf" />
				</f:facet>
			</pm:header>

			<pm:content>
				<h:form>
					<h:panelGroup styleClass="row fullWidth" layout="block"
						id="panelGroup">
						<p:accordionPanel>
							<p:tab title="Populares" style="overflow-x:scroll;">
								<table style="overflow-x:scroll;">
								  <thead>
								    <tr>
								    	<ui:repeat value="#{drinkListMB.resultList}" var="drink" >
									      	<th><h:outputText value="#{drink.nome}" /></th>
									    </ui:repeat>
								    </tr>
								  </thead>			
								  <tbody>
								  	<tr>
								  		<ui:repeat value="#{drinkListMB.resultList}" var="drink" >
								  			<td>
								  				Ingredientes:
								  				<ul>
							  					<ui:repeat value="#{drink.composicao}" var="ingDrink">
													<li><h:outputText value="#{ingDrink.ingrediente.nome}" /></li>
												</ui:repeat>
												</ul>
								  			</td>
								  		</ui:repeat>
								  	</tr>
								  </tbody>
								  <tfoot>
								  	<tr>
								  	<ui:repeat value="#{drinkListMB.resultList}" var="drink" >
								  		<td>
								  			<p:button value="Misturar" icon="check"
								  			></p:button>
								  		</td>
								  	</ui:repeat>
								  	</tr>
								  </tfoot>
								</table>	
							</p:tab>

							<p:tab title="Com Álcool">	
							Em breve.
							</p:tab>

							<p:tab title="Sem Álcool">	
							Em breve.
							</p:tab>
						</p:accordionPanel>
					</h:panelGroup>
				</h:form>
			</pm:content>
		</pm:view>
	</pm:page>

</f:view>